<template>
	<view class="flex-col page">
		<!-- <image class="image"
			src="https://ide.code.fun/api/image?token=66aae6ad47b10e0011272870&name=f7ef1c09f4b4c7e398c5e20507795e83.png" />
		<view class="flex-row justify-center relative group">
			<image class="image_2 pos"
				src="https://ide.code.fun/api/image?token=66aae6ad47b10e0011272870&name=594c25a36ed5e7363da703ed3b0e7468.png" />
			<text class="text">添加音频</text>
		</view> -->
		<u-navbar title="添加音频" back-icon-color="#fff" title-color="#fff" :background="background"></u-navbar>
		<view class="flex-col list">
			<view class="flex-row section list-item mt-15-5" @click="byText">
				<view class="flex-col justify-start items-end relative group_2">
					<view class="flex-col justify-start items-center image-wrapper_2">
						<image class="image_4" src="https://terminator.axu9.com/images/tgwz-icon2.png" />
					</view>
					<view class="flex-col justify-start items-center image-wrapper pos_2">
						<image class="image_3" src="https://terminator.axu9.com/images/tgwz-icon1.png" />
					</view>
				</view>
				<view class="flex-col items-start self-start group_3">
					<text class="font">通过文字</text>
					<text class="mt-10 font_3">脚本音频一键获取</text>
				</view>
				<view class="flex-row items-center self-start section_2">
					<text class="font_2">立即添加</text>
					<image class="shrink-0 image_5 ml-2-5"
						src="https://terminator.axu9.com/images/add-audio-right.png" />
				</view>
			</view>
			<view class="flex-row section list-item mt-15-5" @click="byAudio">
				<view class="flex-col justify-start items-end relative group_2">
					<view class="flex-col justify-start items-center image-wrapper_2">
						<image class="image_4" src="https://terminator.axu9.com/images/tgyy-icon1.png" />
					</view>
					<view class="flex-col justify-start items-center image-wrapper pos_2">
						<image class="image_3" src="https://terminator.axu9.com/images/tgyy-icon2.png" />
					</view>
				</view>
				<view class="flex-col items-start self-start group_3">
					<text class="font">通过语音</text>
					<text class="mt-10 font_3">脚本音频一键获取</text>
				</view>
				<view class="flex-row items-center self-start section_2">
					<text class="font_2">立即添加</text>
					<image class="shrink-0 image_5 ml-2-5"
						src="https://terminator.axu9.com/images/add-audio-right.png" />
				</view>
			</view>
			<view class="flex-row section list-item mt-15-5" @click="extractVideos">
				<view class="flex-col justify-start items-end relative group_2">
					<view class="flex-col justify-start items-center image-wrapper_2">
						<image class="image_4" src="https://terminator.axu9.com/images/tqspnr-icon1.png" />
					</view>
					<view class="flex-col justify-start items-center image-wrapper pos_2">
						<image class="image_3" src="https://terminator.axu9.com/images/tqspnr-icon.png" />
					</view>
				</view>
				<view class="flex-col items-start self-start group_3">
					<text class="font">提取视频内容</text>
					<text class="mt-10 font_3">脚本音频一键获取</text>
				</view>
				<view class="flex-row items-center self-start section_2 " >
					<text class="font_2">立即提取</text>
					<image class="shrink-0 image_5 ml-2-5"
						src="https://terminator.axu9.com/images/add-audio-right.png" />
				</view>
			</view>

		</view>
		<!-- 语音上传 选项 弹窗 -->
		<u-popup v-model="showPop" mode="bottom" close-icon-color="#fff" closeable border-radius="28" :mask-custom-style="maskCustomStyle">
			<view class="popup">
				<view class="flex-col flex-1 ml-7-5">
					<text class="self-center title">通过语音</text>
					<view class="flex-col items-center">
						<view class="opt-list-item flex-row justify-between items-center"
							v-for="(item,index) in optionList" :key="index" @click="clickOptin(index)">
							<view class="opt-list-item-lf flex-row">
								<view class="lf-img-wrap flex-row items-center">
									<image class="lf-img" :src="item.icon" mode=""></image>
								</view>
								<view class="lf-title flex-row items-center">
									{{item.title}}
								</view>
							</view>
							<view class="">
								<image class="rg-img" src="https://terminator.axu9.com/images/arrow-right-byaudio.png"
									mode=""></image>
							</view>
						</view>
					</view>

				</view>
			</view>
		</u-popup>
		
		
		<!-- 设置标题弹窗 -->
		<audioTitlePop ref="audiotitle" @submit="submit" :isLoading="isLoading"></audioTitlePop>
		<!-- 上传视频进度条弹窗 -->
		<progressPop ref="progressPop" :isShow="true" :percent="percent" @cancel="showProgressCancel"></progressPop>
		<!-- <u-popup v-model="showPop1" mode="center" :custom-style="customStyle" :mask-custom-style="maskCustomStyle">
				<view class="flex-col flex-1 popup1 ml-7-5">
				  <text class="self-center title1">添加标题</text>
				  <view class="flex-col self-stretch mt-16-5">
				   <view class="input-wrap">
				   	 <input type="text" v-model="audioTitle" placeholder="请输入音频标题" class="input-class1" placeholder-class="input-placeholder1"/>
				   </view>
				    <view class="flex-row bottom-btn">
				      
				      <view @click="submit" class="flex-col justify-start items-center noagree-btn">
				        <text class="font-agree">确定</text>
				      </view>
				    </view>
				  </view>
				</view>
		</u-popup> -->
	</view>
</template>

<script>
	import { tapeFile } from "@/api/audio.js"
	import { getQiniuToken } from "@/api/user.js"
	import { yinseTiqu, getYinseTiqu } from "@/api/video.js"
	import {
		completQiniuUploadUrl,
		qiniuDomainUrlD,
	} from "@/api/request.js"
	import audioTitlePop from "../../components/audioTitlePop"
	import progressPop from "../../components/progressPop/index.vue";
	export default {
		components: {
			audioTitlePop,
			progressPop
		},
		data() {
			return {
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 1)'
				},
				showPop: false,
				optionList: [{
						icon: 'https://terminator.axu9.com/images/byaudio-jilu-icon.png',
						title: '录音',
					},
					{
						icon: 'https://terminator.axu9.com/images/byaudio-video-icon.png',
						title: '视频声音',
					},
					{
						icon: 'https://terminator.axu9.com/images/byaudio-wenjian-icon.png',
						title: '文件夹中的声音',
					}
				],
				audioUrl: '',//音频路径
				showPop1: false,//设置标题弹窗
				// audioName: '',
				audioTitle: '',//设置音频标题名称
				videoPath: '',//视频路径
				toOptionType: 1,//跳转类型 1音视频合成 2音频库--添加音频 3作品库--添加音频
				isLoading: false,//是否加载中
				audioId: '',//音频id
				percent: 0,//上传进度
			}
		},
		onLoad(options) {
			console.log(options,'options')
			// this.getVideoPath();
			this.videoPath = options.videoPath ? options.videoPath : '';
			this.toOptionType = options.toOptionType ? options.toOptionType : 1
		},
		onUnload() {
			uni.removeStorageSync("gateback")
		},
		// onShareAppMessage: function (res) {},//分享好友
		// onShareTimeline(){},//分享朋友圈
		methods: {
			getVideoPath(){
				// 获取当前页面栈
				let pages = getCurrentPages();
				// 获取上一个页面
				let prevPage = pages[pages.length - 2];
				// 获取上一个页面的data
				let data = prevPage ? prevPage.data : {};
				// 访问data中的数据
				console.log(data.videoPath,'datatat'); // 替换yourDataKey为你需要的数据键名
				this.videoPath = data.videoPath;
			},
			// 通过文字添加音频
			byText() {
				uni.navigateTo({
					url: '/pagesCreate/addAudioByText/index?clickoption=1' + '&toOptionType=' + this.toOptionType + '&videoPath=' + this.videoPath
				})
				uni.setStorageSync("gateback",2)
			},
			// 通过语音添加音频
			byAudio() {
				this.showPop = true;
			},
			// 通过视频提取
			extractVideos() {
				// uni.showToast({
				// 	title: '开发中',
				// 	icon: 'none'
				// })
				uni.navigateTo({
					url: '/pagesCreate/extractVideos/index?videoPath=' + this.videoPath  + '&toOptionType=' + this.toOptionType
				})
				uni.setStorageSync("gateback",3)
			},
			uploadAudio(filePath,fileName){
				var _this = this;
				console.log(filePath,'filePath')
				// _this.$uploadAudio(filePath).then(res => {
				// 	console.log(res, 'uploadImg')
				// 	if(res.data.errno == 1){
				// 		_this.audioUrl = res.data.img
				// 		// _this.audioName = fileName
				// 		console.log(_this.audioUrl, '上传音频')
				// 		// _this.showPop1 = true;
				// 		_this.$refs.audiotitle.open();
				// 		// uni.reLaunch({
				// 		// 	url: '/pages/create/index?audioName=' + fileName + '&audioUrl=' + _this.audioUrl
				// 		// })
				// 	}else {
				// 		uni.showToast({
				// 			title: res.data.message,
				// 			icon: 'none'
				// 		})
				// 	}
					
								
				// }).catch(err => {
				// 	console.log(err,'err')
				// 	uni.showToast({
				// 		title: '出错了',
				// 		icon: 'none'
				// 	})
					
				// })
				_this.$upload(filePath).then(res => {
					console.log(res, 'uploadImg')
					if(res.data.errno == 1){
						_this.audioUrl = res.data.img
						// _this.audioName = fileName
						console.log(_this.audioUrl, '上传音频')
						// _this.showPop1 = true;
						_this.$refs.audiotitle.open();
						// uni.reLaunch({
						// 	url: '/pages/create/index?audioName=' + fileName + '&audioUrl=' + _this.audioUrl
						// })
					}else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
					
								
				}).catch(err => {
					console.log(err,'err')
					uni.showToast({
						title: '出错了',
						icon: 'none'
					})
					
				})
			},
			submit(data){
				// if(this.audioTitle == ''){
				// 	uni.showToast({
				// 		title: '音频标题不能为空',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				uni.showLoading({
					title: '添加中'
				})
				this.isLoading = true;
				console.log(data,'submit')
				this.audioTitle = data
				tapeFile({
					uid: uni.getStorageSync("userId"),
					title: this.audioTitle,
					mp3: this.audioUrl
				}).then(res => {
					uni.hideLoading();
					this.isLoading = false;
					console.log(res,'eeee')
					if(res.errno == 0){
						this.audioId = res.data;
						// if(this.addType == 3){
						// 	uni.redirectTo({
						// 		url: '/pagesHome/audioList/index?audioName=' + this.audioTitle + '&audioUrl=' + this.audioUrl + '&videoPath=' + this.videoPath
						// 	})
						// }else if(this.addType == 2){
						// 	uni.reLaunch({
						// 		url: '/pages/mine/index?current=1'
						// 	})
						// }else {
						// 	uni.reLaunch({
						// 		url: '/pages/create/index?audioName=' + this.audioTitle + '&audioUrl=' + this.audioUrl + '&videoPath=' + this.videoPath
						// 	})
						// }
						if(this.toOptionType == 1){
								uni.reLaunch({
									url: '/pages/create/index?audioTitle=' + this.audioTitle + '&audioUrl=' + this.audioUrl + '&videoPath=' + this.videoPath + '&audioId=' + this.audioId
								})
						}else if(this.toOptionType == 2){
								uni.redirectTo({
									url: '/pagesHome/audioList/index?videoPath=' + this.videoPath
								})
						}else if(this.toOptionType == 3){
							uni.navigateBack({delta:1})
								// uni.redirectTo({
								// 	url: '/pagesMine/worksLibrary/index?current=1'
								// })
						}
						
					}
				}).catch(err => {
					uni.hideLoading();
					this.isLoading = false;
				})
			},
			clickOptin(index) {
				console.log(index, '走了')
				if(index == 0){
					uni.navigateTo({
						url: '/pagesCreate/addAudio/index?videoPath=' + this.videoPath + '&toAddType=4' + '&toOptionType='+ this.toOptionType
					})
					uni.setStorageSync("gateback",2)
				}else if (index == 1) {
					// uni.showToast({
					// 	title: '开发中',
					// 	icon: 'none'
					// })
					// 视频提取音频
					this.chooseVideo()
				}else if (index == 2) {
					// uni.chooseVideo
					// #ifdef MP
					var _this = this;
					wx.chooseMessageFile({
						count: 1, // 默认99
						type: 'file', // 选择文件的类型
						extension: ['mp3', 'm4a', 'amr', 'wav', 'aac','MP3','M4A','AMR','WAV','AAC'], // 选择文件的扩展名
						// extension: ['.m﻿4a', '.mp3'],
						success: function(res) {
							const filePath = res.tempFiles[0].path; // 获取音频文件的临时路径
							// const fileName = res.tempFiles[0].name;
							console.log(res, 'res')
							_this.uploadAudio(filePath);
							
							// 使用uni.uploadFile()方法上传音频文件到服务器
							// uni.uploadFile({
							//   url: 'http://example.com/upload', // 替换为你的上传接口地址
							//   filePath: filePath,
							//   name: 'file', // 上传文件的字段名，‌服务器端会使用这个名字来接收文件
							//   formData: {}, // 如果需要的话，‌可以在这里添加其他的表单数据
							//   success: function (uploadFileRes) {
							//     console.log('上传成功');
							//     console.log(uploadFileRes.data); // 处理上传成功后的数据
							//   },
							//   fail: function (res) {
							//     console.log('上传失败');
							//   }
							// });
						}
					});
					// #endif

				}
			},
			// 上传视频
			chooseVideo() {
				var _this = this;
				uni.chooseMedia({
					count: 1,
					mediaType: ['video'],
					sourceType: ['album'],
					sizeType: ['compressed','original'],
					success: (res) => {
						console.log(res, 'dddddd')
						_this.$refs.progressPop.open();
						// 在这里处理压缩后的视频路径 compressRes.tempFilePath
						_this.uploadQiniuReauest(res.tempFiles[0].tempFilePath, res
							.tempFiles[0]
							.thumbTempFilePath)
					},
					fail: (err) => {
						console.log('选择视频失败：', err);
					}
				})
			},
			// 随机获取字符串
			generateRandomString(length) {
				const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
				let result = '';
				const charactersLength = characters.length;
				for (let i = 0; i < length; i++) {
					result += characters.charAt(Math.floor(Math.random() * charactersLength));
				}
				return result;
			},
			// 七牛上传接口封装
			uploadQiniuReauest(videoUrl, imgUrl) {
				// uni.showLoading({
				// 	title: '上传中',
				// 	mask:true
				// })
			
				var timestamp = Date.now();
				var userId = uni.getStorageSync('userId');
				var name = userId + '/' + this.generateRandomString(8) + timestamp;
			
				var _this = this;
				getQiniuToken().then(res => {
					let token = res.data;
					console.log(res.data, '获取七牛token')
					_this.uploadTask = uni.uploadFile({
						filePath: videoUrl,
						name: 'file',
						url: completQiniuUploadUrl,
						timeout: 1000000,
						formData: {
							token: token,
							key: name
						},
						success: (uploadFileRes) => {
							uni.hideLoading()
							let logo = JSON.parse(uploadFileRes.data);
							console.log(logo, 'logo')
							if (logo.key) {
								console.log(qiniuDomainUrlD + logo.key, '上传路径');
								_this.videoPath = qiniuDomainUrlD + logo.key
								_this.videoYinseTiqu(_this.videoPath)
								// var videoPath = qiniuDomainUrlD + logo.key
								// _this.videoYinseTiqu(videoPath)
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'error'
								})
								_this.$refs.progressPop.close();
							}
			
						},
						fail: (err) => {
							uni.hideLoading()
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							})
							// reject(err)
						}
					})
					// 监听上传进度  
					_this.uploadTask.onProgressUpdate((res) => {
						// this.uploadPercent = res.progress; // 更新进度条  
						// console.log('上传进度', res.progress);
						this.percent = res.progress;
						if (this.percent >= 100) {
							this.$refs.progressPop.close();
							setTimeout(() => {
								this.percent = 0;
							}, 1000)
			
						}
					});
				})
			
			
			},
			// 关闭上传进度弹窗
			showProgressCancel() {
				console.log('关闭上传弹窗')
				this.uploadTask.abort();
				this.uploadTask = null;
			},
			// 视频提取音色
			videoYinseTiqu(url){
				uni.showLoading({
					title: '提取中',
					mask:true
				})
				yinseTiqu({
					uid: uni.getStorageSync("userId"),
					video_url: url
				}).then(res => {
					if(res.errno == 0){
						console.log(res.data,'视频提取音色')
						
						this.getCreateStatus(res.data)
						this.timer = setInterval(() => {
							this.getCreateStatus(res.data);
						}, 1000)
						
					}else {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						})
					}
				}).catch(err=> {
					uni.hideLoading();
					uni.showToast({
						title: '出错了',
						icon: 'none',
						duration: 1000
					})
				})
			},
			// 查询视频生成状态
			getCreateStatus(id){
				var _this = this;
				getYinseTiqu({
					id: id
				}).then(res => {
					if(res.errno == 0){
						var status = res.data.status;
						if(status == 0){
							console.log('生成中')
						}else if (status == 1) {
							// 成功
							clearInterval(this.timer)
							uni.hideLoading();
							_this.audioUrl = res.data.mp3;
							_this.$refs.audiotitle.open();
						
						} else if (status == 2) {
							// 失败
							clearInterval(this.timer)
							uni.hideLoading();
							uni.showToast({
								title: '提取失败',
								icon: 'none',
								duration: 1000
							})
						}
					}
				})
			},
		}
	}
</script>
<style lang="less" scoped>
	/deep/ .u-drawer-bottom {
		background-color: rgba(0, 0, 0, 0) !important;
	}
	/deep/ .u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>
<style>
	@import url(../../static/css/common.css);

	.ml-2-5 {
		margin-left: 5rpx;
	}

	.mt-15-5 {
		margin-top: 31rpx;
	}

	.page {
		padding: 35rpx 20rpx 736rpx;
		background-color: #111113;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.image {
		margin-left: 42rpx;
		margin-right: 13rpx;
		width: 655rpx;
		height: 24rpx;
	}

	.group {
		margin-top: 46rpx;
	}

	.image_2 {
		width: 20rpx;
		height: 35rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
	}

	.list {
		margin-top: 25rpx;
		/* padding: 0 10rpx; */
		width: 710rpx;
	}

	.section {
		padding: 4rpx 10rpx 24rpx;
		border-radius: 24rpx;
		background-image: url('https://terminator.axu9.com/images/add-audio-list-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.list-item:first-child {
		margin-top: 0;
	}

	.group_2 {
		padding-top: 22rpx;
		width: 229rpx;
	}

	.image-wrapper_2 {
		padding: 41rpx 0 36rpx;
		border-radius: 17rpx;
		background-image: url('https://terminator.axu9.com/images/add-audio-rg-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 124rpx;
	}

	.image_4 {
		width: 71rpx;
		height: 74rpx;
	}

	.image-wrapper {
		padding: 21rpx 0 29rpx;
		border-radius: 17rpx;
		background-image: url('https://terminator.axu9.com/images/add-audio-lf-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 140rpx;
	}

	.pos_2 {
		position: absolute;
		left: 0;
		top: 0;
	}

	.image_3 {
		width: 112rpx;
		height: 124rpx;
	}

	.group_3 {
		margin-left: 50rpx;
		margin-top: 69rpx;
		width: 220rpx;
	}

	.font {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 29rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.font_3 {
		font-size: 18rpx;
		font-family: PingFang SC;
		line-height: 17rpx;
		color: #999999;
	}

	.ml-75 {
		margin-left: 75rpx;
	}

	.section_2 {
		/* margin-left: 73rpx; */
		margin-top: 72rpx;
		padding: 18rpx 18rpx 15rpx 22rpx;
		background-image: linear-gradient(90deg, #ddf9f1 0%, #b9fed5 100%);
		border-radius: 28rpx;
		height: 56rpx;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		color: #010101;
	}

	.image_5 {
		width: 10rpx;
		height: 15rpx;
	}

	/* 弹窗 */
	.popup {
		width: 100%;
		height: 668rpx;
		background-image: url('https://terminator.axu9.com/images/byaudio-pop-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;

	}

	.title {
		font-size: 36rpx;
		font-family: PingFang SC;
		line-height: 100rpx;
		font-weight: 500;
		color: #ffffff;
		height: 100rpx;
	}

	.opt-list-item {
		background-color: #282c33;
		border-radius: 24rpx;
		height: 143rpx;
		border: 1rpx solid #4d4f53;
		width: 690rpx;
		margin-bottom: 20rpx;
		padding: 0 40rpx;
	}

	.opt-list-item:first-child .lf-img {
		width: 32rpx;
		height: 45rpx;
	}

	.opt-list-item:last-child .lf-img {
		width: 36rpx;
		height: 31rpx;
	}

	.lf-title {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		margin-left: 20rpx;
	}

	.lf-img {
		width: 35rpx;
		height: 30rpx;
	}

	.rg-img {
		width: 11rpx;
		height: 20rpx;
	}
	
	.popup1 {
	  // margin-right: 40rpx;
	  padding: 59rpx 28rpx 30rpx;
	  border-radius: 32rpx;
	  background-image: url('https://terminator.axu9.com/images/video-pop-bg.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  width: 615rpx;
	  // height: 616rpx;
	}
	.title1 {
	  font-size: 32rpx;
	  font-family: PingFang SC;
	  line-height: 31rpx;
	  font-weight: 500;
	  color: #ffffff;
	}
	.input-wrap {
		 padding: 41rpx 0;
		  border-radius: 16rpx;
		  width: 542rpx;
		  border: 1rpx solid #ffffff;
		  margin-top: 35rpx;
	}
	.input-class1 {
		 margin-left: 30rpx;
		  color: #ffffff;
		  font-size: 28rpx;
		  font-family: PingFang SC;
		  line-height: 26rpx;
	}
	.input-placeholder1 {
		/* margin-left: 30rpx; */
		 color: #ffffff;
		 font-size: 28rpx;
		 font-family: PingFang SC;
		 line-height: 26rpx;
	}
	
	.content1 {
	  margin-left: 6rpx;
	  color: #ffffff;
	  font-size: 26rpx;
	  font-family: PingFang SC;
	  line-height: 54rpx;
	  text-align: center;
	  height: 270rpx;
	  overflow-y: scroll;
	}
	.bottom {
	  margin-top: 26rpx;
	}
	.text_agree {
	  color: #ffffff;
	  font-size: 22rpx;
	  font-family: PingFang SC;
	  line-height: 22rpx;
	}
	.bottom-btn {
	  margin-top: 35rpx;
	}
	.agree-btn {
	  padding: 34rpx 0;
	  flex: 1 1 257rpx;
	  border-radius: 16rpx;
	  height: 102rpx;
	  border-left: solid 2rpx #00e586;
	  border-right: solid 2rpx #00e586;
	  border-top: solid 2rpx #00e586;
	  border-bottom: solid 2rpx #00e586;
	}
	.font-noagree {
		color: #00e586;
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
	}
	.font-agree {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
	}
	
	.noagree-btn {
	  margin-right: 5rpx;
	  padding: 34rpx 0;
	  flex: 1 1 257rpx;
	  background-image: linear-gradient(90deg, #00ccbb 0%, #00e586 100%);
	  border-radius: 16rpx;
	  height: 100rpx;
	}
</style>